<template>
  <div class="register-page">
    <div class="register-box">
      <!-- <el-button type="primary" @click="returnLoginEvent()"
      >已有账号，返回登录</el-button
    > -->
      <h3 class="title-tip">请填写注册信息</h3>
      <el-form label-position="left" label-width="80px" :model="registerForm" :rules="rules" ref="registerForm">
        <!-- 工号 -->
        <el-form-item label="身份证" prop = "id_card">
          <el-input placeholder="请确认您的身份证号" v-model="registerForm.id_card"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="verifyPwd">
          <el-input placeholder="请确认您的密码" type="password" v-model="registerForm.verifyPwd"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入您的真实姓名" v-model="registerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input placeholder="请输入您的手机号" v-model="registerForm.tel" maxlength="11"></el-input>
        </el-form-item>
         <el-form-item label = "出生日期" prop="birth">
        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择出生日期" v-model="registerForm.birth" style="width: 100%;"></el-date-picker>
      </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <el-input placeholder="请输入您的居住地址" v-model="registerForm.address" ></el-input>
        </el-form-item>
        <el-form-item label="名族" prop="nation">
          <el-input placeholder="请输入您的民族" v-model="registerForm.nation" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入您的邮箱" v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-button :disabled="loading" class="register-btn" type="primary"
          @click="register(registerForm)">申请注册</el-button>
        <el-button class="return-to-login" @click="returnLoginEvent()">已有账号，返回登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register } from '@/api'
// import encrypt from "@/utils/encrypt";
// import { getVerifyCode, register, checkAdminCode } from "@/api";
import { Notification } from "element-ui";
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerForm.verifyPwd !== '') {
            this.$refs.registerForm.validateField('verifyPwd');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      registerForm : {
      "tel" : null,
      "password" : null,
      "verifyPwd" : null,
      "email" : null,
      "name" : null,
      "sex" : null,
      "id_card" : null,
      "address" : null,
      "birth" : null,
      "nation" : null
    },
    rules: {
      tel : [
        {required: true, message : '请输入手机号', trigger : 'blur' },
      ],
      password : [
            {validator: validatePass, trigger: 'blur' }
      ],
      verifyPwd : [
            {validator: validatePass2, trigger: 'blur' }
      ],
      email : [
        {required : true, message : '请输入邮箱', trigger: "blur"}
      ],
      name : [
        {required : true, message : '请输入姓名', trigger: 'blur'}
      ],
      sex : [
        { required: true, message: '请选择性别', trigger: 'change' }
      ],
      id_card : [
        {required : true, message : '请输入身份证', trigger : 'blur'},
      ],
      address :[
        {required : true, message : '请输入地址', trigger : 'blur'},
      ],
      birth :[
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      ],
      nation : [
        {required : true, message : '请输入民族', trigger : 'blur'},

      ]
    }
    }
  },
  methods: {
    register(data) {
      console.log(this.registerForm)
      this.registerForm.sex = this.registerForm.sex === "0" ? "女" : "男" 
      register.userRegister (data).then(
        res => {
          this.returnLoginEvent
        }
      )
    },
    returnLoginEvent () {
      this.$router.push({path : '/'})
    }
  }
    
}
</script>

<style lang="less">
.register-page {
  display: flex;
  justify-content: center;

  .register-box {
    display: flex;
    width: 360px;
    margin-top: 100px;
    background: #fff;
    border-radius: 8px;
    border: solid 1px #c2c2c2;
    // box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    //   rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 30px;
    box-sizing: border-box;
    flex-direction: column;
    text-align: left;
    margin-bottom: 40px;

    .title-tip {
      margin-bottom: 30px;
    }

    .el-form {
      .el-row {
        display: flex;
        flex-direction: row;

        .el-input {
          margin-right: 20px;
        }
      }
    }

    .register-btn {
      margin-top: 22px;
      margin-bottom: 22px;
      width: 100%;
    }

    .return-to-login {
      width: 100%;
      margin: 0;
      // padding: 0px;
    }
  }
}
</style>
